<style >
    .row-bg {
        margin-bottom: 25px;

    }
    .audit-line {
        border-top: 1px dotted #999;
        padding-top: 5px
    }
    .icon {
        height: 50px;
        width: 50px;
        margin-left: 5px;
    }
</style>
<template>
    <div>
        <Row >
            <Row>
                <el-col :span="23" class="toolbar marginTop10px" id="serachId">
                    <el-form :inline="true" :model="query">
                        <el-form-item style="float:right">
                            <el-button type="primary" size="small" v-on:click="publishSearchPage">查询</el-button>
                        </el-form-item>
                        <el-form-item style="float:right">
                            <el-input v-model="query.appName" size="small" placeholder="请输入应用名称"  @keyup.enter.native="searchEnterFun"></el-input>
                        </el-form-item>
                        <el-form-item style="float:right;width:120px">
                            <el-select v-model="query.status" size="small">
                                <el-option label="待审核" value="0"></el-option>
                                <el-option label="已通过" value="1"></el-option>
                                <el-option label="未通过" value="2"></el-option>
                                <el-option label="全部" value=""></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
            </Row>

        </Row>
        <el-table :data="tableData"  class="titleLineSymbolTwo"  style=" min-height:500px;">
            <el-table-column type="index" label="序号" min-width="50"></el-table-column>
            <el-table-column prop="appCode" label="应用编码"  min-width="80"/>
            <el-table-column prop="appName" label="应用名称" min-width="80"/>
            <el-table-column prop="className" label="应用类别" min-width="100"/>
            <el-table-column prop="marketName" label="发布市场" min-width="100"/>
            <el-table-column prop="operateType" label="发布类型" min-width="100" :formatter="formatOperateType"/>
            <el-table-column prop="status" label="状态" min-width="90" :formatter="formatStatus"/>
            <el-table-column prop="createUserName" label="申请人" min-width="90"/>
            <el-table-column prop="createTime" label="申请时间" min-width="100" :formatter="formatCreateTime"/>
            <el-table-column label="操作" min-width="120">
                <template slot-scope="scope">
                    <el-button @click="handleClickDetail(scope.row)" type="text" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="handleClickVerify(scope.row.id, 1)" v-show="scope.row.status != 1 && scope.row.status != 2">通过</el-button>
                    <el-button type="text" size="small" @click="handleClickVerify(scope.row.id, 2)" v-show="scope.row.status != 1 && scope.row.status != 2">不通过</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="23" class="toolbar marginTop10px">
            <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                           :current-page="pageNum" :page-size="pageSize" :total="total">
            </el-pagination>
        </el-col>

        <el-dialog   title="应用详情" :visible.sync="publishDetailVisible" :modal-append-to-body="false" width="45%" >

            <el-tabs v-model="activeName" @tab-click="handleClick"  style="margin-top: -20px;">
                <el-tab-pane label="基本情况" name="first">
                    <el-row type="flex" class="row-bg" align="bottom" >
                        <el-col :span="6"><div class="grid-content bg-purple">应用图标<img :src="detailData.logoImage" class="icon"/></div></el-col>
                        <el-col :span="2">
                        </el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">应用名称: {{detailData.appName}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="8"><div class="grid-content bg-purple">应用分类: {{detailData.className}}</div></el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">开发商: {{detailData.supplierName}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="8"><div class="grid-content bg-purple">系统应用: {{detailData.isSystemApp | formatYesNoFilter}}</div></el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">应用状态: {{detailData.status | formatStatusFilter}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="8"><div class="grid-content bg-purple">应用类型: {{detailData.classification | formatClassificationFilter}}</div></el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">应用排序: {{detailData.sort}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="20"><div class="grid-content bg-purple">部署网段: {{detailData.network | formatNetworkFilter}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="20"><div class="grid-content bg-purple">支持终端: {{detailData.appTerminal | formatAppTerminalFilter}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="20"><div class="grid-content bg-purple">功能介绍: {{detailData.describe}}</div></el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="发布情况" name="second" style="height:357px">
                    <el-table :data="detailData.versionInfoVos">
                        <el-table-column property="versionType" label="客户端" :formatter="formatAppTerminalFilter"></el-table-column>
                        <el-table-column property="newVersionInfo.version" label="原版本号" ></el-table-column>
                        <el-table-column property="version" label="新版本号"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

            <el-row v-show="detailData.status == 0"  class="audit-line">
                <!-- <hr/> -->
                <el-col :span="5" style="margin-bottom:20px"> 审核意见</el-col>

                <el-form>
                    <el-col :span="20" style="height:30px">
                        <el-radio-group v-model="detailStatus">
                            <el-radio :label="1">通过</el-radio>
                            <el-radio :label="2">不通过</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-form>
                <el-form>
                    <el-input type="textarea" v-model="detailTextArea"></el-input>
                    <!-- <textarea v-model="detailTextArea"/> -->
                </el-form>
            </el-row>
            <el-row v-show="detailData.status != 0" class="audit-line">
                <el-col :span="2"></el-col>
                <div>审核结果：{{detailData.status | formatStatusFilter}}</div>
                <div>审核意见: {{detailData.premark}}</div>

            </el-row>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native="publishDetailVisible = false" @click="handleClickVerify(detailData.id, detailStatus)">确定</el-button>
                <el-button @click.native="publishDetailVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import util from '../app-market/api/util';

    import {appBasePublishSearch, publishMarketUpdateVerify} from '../api/api';
    export default {
        // 组件注册
        components: {
        },
        data () {
            return {
                query: {
                    appName: '',
                    status: '0',
                },
                tableData: [],
                detailData: {},
                activeName: 'first',
                publishDetailVisible: false,
                pageNum: 1,
                pageSize: 10,
                total: 0,
                detailStatus: 1,
                detailTextArea: '',

            }
        },
        methods: {
            publishSearchPage(){
                let params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    appName: this.query.appName,
                    status: this.query.status
                };
                let _this = this;
                appBasePublishSearch(params).then(function(result){

                    _this.tableData = result.data.list;
                    _this.pageNum = result.data.pageNum;
                    _this.pageSize = result.data.pageSize;
                    _this.total = result.data.total;
                });
            },
             //实现回车键搜索功能
			searchEnterFun:function(e){
				this.publishSearchPage();
            },
            handleClickDetail(row){
                this.publishDetailVisible = true;
                this.detailData = Object.assign({}, row);
                this.detailStatus = row.status == 1 || row.status == 2 ? row.status : 1;
                this.detailTextArea = row.premark;
            },
            handleClick(){

            },
            handleClickVerify(id, status){
                let params = {
                    id: id,
                    status: status,
                    remark: this.detailTextArea
                };
                let this_ = this;
                publishMarketUpdateVerify(params).then(function(result){
                    if(result.data.code == 'S100101' && result.data.data == true) {
                        this_.publishSearchPage();
                    }else{
                        alert(result.data.msg);
                    }
                });
            },
            handleCurrentPageChange: function (pageNum) {// 翻页动作
                this.pageNum = pageNum;
                this.publishSearchPage();// 翻页后刷新页面数据
            },
            formatCreateTime: function (row, column) {
                return row.createTime = (!row.createTime || row.createTime == '') ? '' : util.formatDate.format(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss');
            },
            formatStatus: function (row, column) {
                return row.status == 0 ? '待审核' : row.status == 1 ? '审核通过' : row.status == 2 ? '审核不通过':'';
            },
            formatOperateType: function (row, column) {
                return row.operateType == 1 ? '应用发布' : row.operateType == 2 ? '版本更新' : '';
            },
            formatAppTerminalFilter: function(row){
                return row.versionType == 1 ? 'web' : row.status == 2 ? 'IOS' : row.status == 3? 'Android':'';
            }
        },
        filters:{
            formatStatusFilter: function (value){
                return value == 0 ? '待审核' : value == 1 ? '审核通过' : value == 2 ? '审核不通过':'';
            },
            formatNetworkFilter: function(value){
                return value == 1 ? '移动互联网' : value == 2 ? '移动信息网' : value == 3 ? '公安信息网':'';
            },
            formatClassificationFilter: function(value){
                return value == 1 ? 'Ⅰ类应用' : value == 2 ? 'Ⅱ类应用' : value == 3 ? 'Ⅲ类应用':'';
            },
            formatYesNoFilter: function(value){
                return value == 0 ? '否' : value == 1 ? '是' : '';
            },
            formatAppTerminalFilter: function(value){
                if(value != undefined){
                    var arr = (value + "").split(",");
                    var str = "";
                    for(var i in arr){
                        if(arr[i] == '1'){
                            str += "Web、";
                        }else if(arr[i] == '2'){
                            str += "iOS、";
                        }else if(arr[i] == '3'){
                            str += "Android、";
                        }
                    }
                    return str.substring(0, str.length - 1);
                }
                return ;
            }
        },
        mounted(){
            this.publishSearchPage();
        }
    }
</script>
